<div class="contain">
  <slot />
  <div class="btn-container">
    <button class="copy-to-clipboard">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        aria-hidden="true"
        class="copy"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"
        ></path>
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        aria-hidden="true"
        class="check hidden"
      >
        <path
          fill-rule="evenodd"
          d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </button>
  </div>
</div>

<style>
  .contain {
    position: relative;
    margin-top: 2.5rem;
  }

  .contain :global(pre) {
    margin-top: 0;
  }

  .btn-container {
    position: absolute;
    top: 10px;
    right: 7px;
    display: none;
  }

  @media (min-width: 37.75em) {
    .btn-container {
      display: block;
    }
  }

  .copy-to-clipboard {
    background: none;
    cursor: pointer;
    color: rgb(255 255 255 / 0.7);
    height: 30px;
    width: 30px;
    padding: 4px;
  }

  .copy-to-clipboard:hover {
    color: rgb(255 255 255 / 1);
  }

  .hidden {
    display: none;
  }

  @media (prefers-color-scheme: dark) {
    .copy-to-clipboard:hover {
      background: #fafafa;
    }
  }
</style>
